<template>
  <div class="sidebar-footer">
    <button class="uncompleted-btn" @click="goToHome">
      <span class="icon">
        <SvgIcon name="list" width="20" height="20" />
      </span>
      未完成
    </button>
    <button class="completed-btn" @click="goToCompleted">
      <span class="icon">
        <SvgIcon name="check-circle" width="20" height="20" />
      </span>
      已完成
    </button>
    <button class="trash-btn" @click="goToRecycle">
      <span class="icon">
        <SvgIcon name="trash" width="20" height="20" />
      </span>
      回收站
    </button>
    <button class="settings-btn" @click="goToSettings">
      <span class="icon">
        <SvgIcon name="settings" width="20" height="20" />
      </span>
      设置
    </button>
    <div class="beian-info">
      <a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备88888888号</a>
    </div>
  </div>
</template>

<script setup>
import SvgIcon from '@/components/SvgIcon.vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const goToHome = () => {
  router.push('/')
}

const goToCompleted = () => {
  router.push('/completed')
}

const goToRecycle = () => {
  router.push('/recycle')
}

const goToSettings = () => {
  router.push('/settings')
}
</script>

<style scoped>
.sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}

.trash-btn,
.settings-btn,
.completed-btn,
.uncompleted-btn {
  width: 100%;
  padding: 12px 15px;
  background-color: #f5f5f7;
  border: none;
  border-radius: 50px;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #86868b;
  transition: all 0.3s;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.settings-btn {
  margin-bottom: 0;
}

.trash-btn:hover,
.settings-btn:hover,
.completed-btn:hover,
.uncompleted-btn:hover {
  color: #1d1d1f;
  background-color: #e5e5ea;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.completed-btn {
  color: #4361ee;
}

.completed-btn:hover {
  color: #3a56d4;
}

.uncompleted-btn {
  color: #00b894;
}

.uncompleted-btn:hover {
  color: #00a187;
}

.icon {
  margin-right: 12px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.beian-info {
  margin-top: 15px;
  text-align: center;
  font-size: 12px;
  color: #86868b;
}

.beian-info a {
  color: #86868b;
  text-decoration: none;
}

.beian-info a:hover {
  text-decoration: underline;
}
</style>
